<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
    <!-- 引入bootstrap(css,js) -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.css.map">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<!-- 更新的模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">更新信息</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="update_form">
          <div class="mb-3">
            <label for="update_empno" class="col-form-label">Empno:</label>
            <input type="number" class="form-control" id="update_empno" disabled>
          </div>
          <div class="mb-3">
            <label for="update_ename" class="col-form-label">Ename:</label>
            <input type="text" class="form-control" id="update_ename">
          </div>
          <div class="mb-3">
            <label for="update_job" class="col-form-label">Job:</label>
            <input type="text" class="form-control" id="update_job">
          </div>
          <div class="mb-3">
            <label for="update_mgr" class="col-form-label">Mgr:</label>
            <input type="number" class="form-control" id="update_mgr">
          </div>
          <div class="mb-3">
            <label for="update_hiredate" class="col-form-label">Hiredate:</label>
            <input type="date" class="form-control" id="update_hiredate">
          </div>
          <div class="mb-3">
            <label for="update_sal" class="col-form-label">Sal:</label>
            <input type="number" class="form-control" id="update_sal">
          </div>
          <div class="mb-3">
            <label for="update_comm" class="col-form-label">Comm:</label>
            <input type="number" class="form-control" id="update_comm">
          </div>
          <div class="mb-3">
            <label for="update_deptno" class="col-form-label">Deptno:</label>
            <input type="number" class="form-control" id="update_deptno">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="updateStar()">确认</button>
      </div>
    </div>
  </div>
</div>

<!-- 添加的模态框 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">添加员工</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="save_form">
          <div class="mb-3">
            <label for="save_empno" class="col-form-label">Empno:</label>
            <input type="number" class="form-control" id="save_empno">
          </div>
          <div class="mb-3">
            <label for="save_ename" class="col-form-label">Ename:</label>
            <input type="text" class="form-control" id="save_ename">
          </div>
          <div class="mb-3">
            <label for="save_job" class="col-form-label">Job:</label>
            <input type="text" class="form-control" id="save_job">
          </div>
          <div class="mb-3">
            <label for="save_mgr" class="col-form-label">Mgr:</label>
            <input type="number" class="form-control" id="save_mgr">
          </div>
          <div class="mb-3">
            <label for="save_hiredate" class="col-form-label">Hiredate:</label>
            <input type="date" class="form-control" id="save_hiredate">
          </div>
          <div class="mb-3">
            <label for="save_sal" class="col-form-label">Sal:</label>
            <input type="number" class="form-control" id="save_sal">
          </div>
          <div class="mb-3">
            <label for="save_comm" class="col-form-label">Comm:</label>
            <input type="number" class="form-control" id="save_comm">
          </div>
          <div class="mb-3">
            <label for="save_deptno" class="col-form-label">Deptno:</label>
            <input type="number" class="form-control" id="save_deptno">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="saveStar()">确认</button>
      </div>
    </div>
  </div>
</div>


<div class="container-fluid">
  <!-- 添加按钮 -->
  <div class="row">
    <div class="col-2">
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal2">添加明星</button>
      <button type="button" class="btn btn-primary" onclick="selectAll()">查询所有</button>
    </div>
  </div>

  <!-- 查询 -->
  <div class="row">
    <div class="col-4">
      <input type="text" class="form-control" id="byId" placeholder="请输入ID">
      <button onclick="selectById()" class="form-control">根据id查询</button>
    </div>
    <div class="col-4">
      <input type="text" class="form-control" id="byName" placeholder="请输入Name">
      <button onclick="selectByName()" class="form-control">根据name查询</button>
    </div>
    <div class="col-4">
      <input type="date" class="form-control" id="startDate">
      <input type="date" class="form-control" id="endDate">
      <button onclick="selectByDate()" class="form-control">根据Date查询</button>
    </div>
  </div>

  <!-- 表格 -->
    <div class="row">
      <table class="table table-striped">
        <thead>
        <tr>
          <th scope="col">Empno</th>
          <th scope="col">Ename</th>
          <th scope="col">Job</th>
          <th scope="col">Mgr</th>
          <th scope="col">Hiredate</th>
          <th scope="col">sal</th>
          <th scope="col">comm</th>
          <th scope="col">deptno</th>
        </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <!-- 分页 -->
    <div class="row">
      <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
          <!-- <li class="page-item"><a class="page-link" href="#">1</a></li> -->
        </ul>
      </nav>
    </div>
  </div>

<script>



  var src = [];
  var tbody = document.querySelector('tbody');
  var pageSize = 10;
  var totalPage = Math.ceil(src.length/pageSize);
  var currPage = 1;
  var navul = document.querySelector(".pagination.justify-content-center");
  var update_empno = document.querySelector('#update_empno');
  var update_ename = document.querySelector('#update_ename');
  var update_job = document.querySelector('#update_job');
  var update_mgr = document.querySelector('#update_mgr');
  var update_hiredate = document.querySelector('#update_hiredate');
  var update_sal = document.querySelector('#update_sal');
  var update_comm = document.querySelector('#update_comm');
  var update_deptno = document.querySelector('#update_deptno');
  var update = null;   // 保存要更新人的id
  var save_empno = document.querySelector('#save_empno');
  var save_ename = document.querySelector('#save_ename');
  var save_job = document.querySelector('#save_job');
  var save_mgr = document.querySelector('#save_mgr');
  var save_hiredate = document.querySelector('#save_hiredate');
  var save_sal = document.querySelector('#save_sal');
  var save_comm = document.querySelector('#save_comm');
  var save_deptno = document.querySelector('#save_deptno');

  var save_form = document.querySelector('#save_form');
  var byId = document.querySelector('#byId');
  var byName = document.querySelector('#byName');
  var startDate = document.querySelector('#startDate');
  var endDate = document.querySelector('#endDate');
  var res = [];  // 保存查询结果
  var flag = false; // 是否条件查询




  axios.get("http://localhost:8080/emp/selectAll")
        .then((res)=>{
          src = res.data.data;
          totalPage = Math.ceil(src.length/pageSize);
          filltable();
          fillnav();
        });


  // 查询所有
  function selectAll(){
    // 所有变量初始化
    axios.get("http://localhost:8080/emp/selectAll")
            .then((res)=>{
              src = res.data.data;
              totalPage = Math.ceil(src.length/pageSize);
              res = [];
              flag = false;
              currPage = 1;
              location.hash = "#1";
              // 重新填充表格和链接
              filltable();
              fillnav();
            });
  }

  // 根据id查询
  function selectById(){
    res = [];
    axios.get("http://localhost:8080/emp/selectById?empno="+byId.value)
            .then((result)=>{
              res.push(result.data.data);
              totalPage = Math.ceil(res.length/pageSize);
              flag = true;
              currPage = 1;
              location.hash = "#1";
              // 重新填充表格和链接
              filltable();
              fillnav();
            });
  }

  // 根据name查询
  function selectByName(){
    res = [];
    axios.get("http://localhost:8080/emp/selectByName?ename="+byName.value)
            .then((result)=>{
              res= result.data.data;
              totalPage = Math.ceil(res.length/pageSize);
              flag = true;
              currPage = 1;
              location.hash = "#1";
              // 重新填充表格和链接
              filltable();
              fillnav();
            });
  }

  // 根据日期查询
  function selectByDate(){
    res = [];
    axios.get("http://localhost:8080/emp/selectByHiredate?start="+startDate.value +"&end="+endDate.value)
            .then((result)=>{
              res= result.data.data;
              totalPage = Math.ceil(res.length/pageSize);
              flag = true;
              currPage = 1;
              location.hash = "#1";
              // 重新填充表格和链接
              filltable();
              fillnav();
            });
  }


  // 锚点改变事件，window自带的,要改变当前页码
  window.onhashchange = function(){
    // 得到location.hash -> #1,#2...  截取
    // substring(1) -> 1,2页码， Number()转成数字
    currPage = Number(location.hash.substring(1));
    // 填充表格
    filltable();
  }

  // 添加明星
  function saveStar(){
    // 查找所有明星
    axios.get("http://localhost:8080/emp/insert",
            {
              params: {
                empno: save_empno.value,
                ename: save_ename.value,
                job: save_job.value,
                mgr: save_mgr.value,
                hiredate: save_hiredate.value,
                sal: save_sal.value,
                comm: save_comm.value,
                deptno: save_deptno.value
              }
            })
            .then((result)=>{
              axios.get("http://localhost:8080/emp/selectAll")
                      .then((res)=>{
                        src = res.data.data;
                        totalPage = Math.ceil(src.length/pageSize);
                        filltable();
                        fillnav();
                   });
            });

    // 清空表格
    save_form.reset();
  }

  // 更新明星
  function updateStar(){
    // 查找所有明星
    axios.get("http://localhost:8080/emp/update",
            {
              params: {
                empno: update_empno.value,
                ename: update_ename.value,
                job: update_job.value,
                mgr: update_mgr.value,
                hiredate: update_hiredate.value,
                sal: update_sal.value,
                comm: update_comm.value,
                deptno: update_deptno.value
                }
            })
            .then((result)=>{
              axios.get("http://localhost:8080/emp/selectAll")
                      .then((res)=>{
                        src = res.data.data;
                        totalPage = Math.ceil(src.length/pageSize);
                        filltable();
                        fillnav();
                      });
            });

  }

  // 填充分页
  function fillnav(){
    // 清空ul
    navul.innerHTML = "";
    if (!flag){
      totalPage = Math.ceil(src.length/pageSize);
    }else{
      totalPage = Math.ceil(res.length/pageSize);
    }
    // 遍历填充ul
    for(let i = 1; i <= totalPage ; i++){
      let li = document.createElement("li");
      li.setAttribute("class","page-item");
      navul.append(li);
      let a = document.createElement("a");
      a.setAttribute("class","page-link");  // a.className="page-link";
      a.href = "#"+i; // a.setAttribute("href","#"+i);
      a.innerHTML = i;
      li.append(a);
    }
  }

  // 填充tbody
  function filltable(){
    // 清空tbody
    tbody.innerHTML = "";
    // 截取要显示页码的数据
    let show;
    if (!flag){
      show = src.slice((currPage-1)*pageSize,currPage*pageSize);
    }else{
      show = res.slice((currPage-1)*pageSize,currPage*pageSize);
    }
    // 循环遍历所有数据
    for(let i = 0 ; i < show.length; i++){
      // 往tbody中插入一行
      let tr = tbody.insertRow();

      // 每个属性创建一个td
      let td1 = tr.insertCell();
      td1.innerHTML = show[i].empno;
      let td2 = tr.insertCell();
      td2.innerHTML = show[i].ename;
      let td3 = tr.insertCell();
      td3.innerHTML = show[i].job;
      let td4 = tr.insertCell();
      td4.innerHTML = show[i].mgr;
      let td5 = tr.insertCell();
      td5.innerHTML = show[i].hiredate;
      let td6 = tr.insertCell();
      td6.innerHTML = show[i].sal;
      let td7 = tr.insertCell();
      td7.innerHTML = show[i].comm;
      let td8 = tr.insertCell();
      td8.innerHTML = show[i].deptno;

      // 添加一列
      let td9 = tr.insertCell();
      // 创建两个按钮
      let updatebtn = document.createElement("button");
      let delbtn = document.createElement("button");
      updatebtn.innerHTML = "更新";
      delbtn.innerHTML = "删除";
      updatebtn.className = "btn btn-primary"; // data-bs-toggle="modal" data-bs-target="#exampleModal"
      updatebtn.setAttribute("data-bs-toggle","modal");
      updatebtn.setAttribute("data-bs-target","#exampleModal");
      // 添加更新事件
      updatebtn.addEventListener('click',function(){
        update_empno.value=show[i].empno;
        update_ename.value = show[i].ename;
        update_job.value = show[i].job;
        update_mgr.value = show[i].mgr;
        update_hiredate.value = show[i].hiredate;
        update_sal.value = show[i].sal;
        update_comm.value = show[i].comm;
        update_deptno.value = show[i].deptno;
        // 保存要更新的id
        update = show[i].empno;
      });


      delbtn.className = "btn btn-danger";
      // 把按钮添加到列
      td9.append(updatebtn);
      td9.append(delbtn);
      // 添加事件
      delbtn.addEventListener('click',function(){
        axios.get("http://localhost:8080/emp/delete?empno="+show[i].empno)
                .then((result)=>{
                  axios.get("http://localhost:8080/emp/selectAll")
                        .then((res)=>{
                        src = res.data.data;
                        totalPage = Math.ceil(src.length/pageSize);
                        filltable();
                        fillnav();
                      });
           });
      });
    }
  }


</script>
</body>
</html>